<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-col :span="4"><el-button type="primary" @click="showDialog=true">添加页面</el-button></el-col>
        <el-col class="search" :span="12" :offset="8">
          <el-input
            v-model="search"
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
          />
          <el-button @click="searchFn">筛选</el-button>
        </el-col>
      </div>
      <el-table
        :data="pageList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="content"
          label="内容"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.content }} </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="updatePage(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="delPage(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="page.pageSize"
        :current-page="page.page"
        :total="total"
        @current-change="pageFn"
      />
    </el-card>
    <el-dialog
      :title="form.id?'编辑页面':'添加页面'"
      :visible.sync="showDialog"
      width="67%"
      :before-close="closeDialog"
    >
      <el-form ref="addPage" label-position="right" label-width="auto" :model="form" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入标题"
            width="100%"
          />
        </el-form-item>
        <el-form-item label="内容">
          <div id="app">
            <vue-editor v-model="form.content" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addPage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPage, addPage, delPage, updatePage } from '@/api/page'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      showDialog: false,
      pageList: [],
      form: { },
      search: '',
      total: 0,
      page: {
        page: 1,
        pageSize: 5
      },
      rules: {
        title: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { max: 10, message: '最多不能超过10字符', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const res = await getPage('/count?title_contains=')
    this.total = res.data
    this.getPage('')
  },
  methods: {
    closeDialog() {
      this.form = {}
      this.showDialog = false
    },
    async getPage(str) {
      const _limit = '?_limit=' + this.page.pageSize
      const _start = '&_start=' + (this.page.page - 1) * this.page.pageSize
      const res = await getPage(_limit + _start + str)
      this.pageList = res.data
    },
    async addPage() {
      // 校验表单后再发送请求
      await this.$refs.addPage.validate()
      if (this.form.id) {
        await updatePage(this.form)
      } else {
        await addPage(this.form)
      }
      this.getPage('')
      this.closeDialog()
    },
    async delPage(id) {
      await this.$confirm('确定要删除吗')
      await delPage(id)
      await this.$message.success('删除成功')
      this.getPage('')
    },
    updatePage(data) {
      this.showDialog = true
      setTimeout(() => {
        this.form = { ...data }
      }, 100)
    },
    async searchFn() {
      this.page.page = 1
      const res = await getPage('/count?title_contains=' + this.search)
      this.total = res.data
      this.getPage('&title_contains=' + this.search)
    },
    pageFn(newPage) {
      this.page.page = newPage
      this.getPage('&title_contains=' + this.search)
      // console.log(_limit, _start)
    }
  }
}
</script>

<style lang="scss">

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin:20px;
    width: 97%;
  }
  .search{
    display: flex;
  }

</style>
